import React from "react"
import {
  Brain,
  BookOpen,
  MessageSquareMore,
  BellElectric,
  NotepadText,
  Split,
  RefreshCw,
  Infinity,
  CodeXml,
  FileChartPie,
  Variable,
  Book,
  Equal,
  Cpu,
  Network,
  Funnel
} from "lucide-react"
import { Separator } from "@/components/ui/separator"
import { Card, CardHeader, CardContent, CardTitle } from "@/components/ui/card"
import { cn } from "@/lib/utils"

const commonSelectorItem = [
  { title: "LLM", type: "model", bgColor: "bg-indigo-700", icon: <Brain className="w-4 h-4 text-white" /> },
  { title: "知识检索", type: "rag", bgColor: "bg-green-600", icon: <BookOpen className="w-4 h-4 text-white" /> },
  {
    title: "直接回复",
    type: "replyDirectly",
    bgColor: "bg-orange-600",
    icon: <MessageSquareMore className="w-4 h-4 text-white" />
  },
  { title: "Agent", type: "agent", bgColor: "bg-indigo-700", icon: <BellElectric className="w-4 h-4 text-white" /> }
]

const questionSelectorItem = [
  {
    title: "问题分类器",
    type: "problemClassifier",
    bgColor: "bg-green-600",
    icon: <NotepadText className="w-4 h-4 text-white" />
  }
]

const logicSelectorItem = [
  {
    title: "条件分支",
    type: "conditions",
    bgColor: "bg-cyan-500",
    icon: <Split className="w-4 h-4 text-white" />
  },
  {
    title: "迭代",
    type: "iteration",
    bgColor: "bg-cyan-500",
    icon: <RefreshCw className="w-4 h-4 text-white" />
  },
  {
    title: "循环",
    type: "cycle",
    bgColor: "bg-cyan-500",
    icon: <Infinity className="w-4 h-4 text-white" />
  }
]

const transformSelectorItem = [
  {
    title: "代码执行",
    type: "codeExecution",
    bgColor: "bg-blue-500",
    icon: <CodeXml className="w-4 h-4 text-white" />
  },
  {
    title: "模版转换",
    type: "templateTransform",
    bgColor: "bg-blue-500",
    icon: <FileChartPie className="w-4 h-4 text-white" />
  },
  {
    title: "变量聚合器",
    type: "variableAggregator",
    bgColor: "bg-blue-500",
    icon: <Variable className="w-4 h-4 text-white" />
  },
  {
    title: "文档提取器",
    type: "documentExtractor",
    bgColor: "bg-green-500",
    icon: <Book className="w-4 h-4 text-white" />
  },
  {
    title: "变量赋值",
    type: "variableAssignment",
    bgColor: "bg-blue-500",
    icon: <Equal className="w-4 h-4 text-white" />
  },
  {
    title: "参数提取器",
    type: "parameterExtractor",
    bgColor: "bg-blue-500",
    icon: <Cpu className="w-4 h-4 text-white" />
  }
]

const toolSelectorItem = [
  {
    title: "HTTP 请求",
    type: "httpRequest",
    bgColor: "bg-purple-500",
    icon: <Network className="w-4 h-4 text-white" />
  },
  {
    title: "列表操作",
    type: "listOperation",
    bgColor: "bg-cyan-500",
    icon: <Funnel className="w-4 h-4 text-white" />
  }
]

const nodeSelectorItems = [
  { group: "", items: commonSelectorItem },
  { group: "问题理解", items: questionSelectorItem },
  { group: "逻辑", items: logicSelectorItem },
  { group: "转换", items: transformSelectorItem },
  { group: "工具", items: toolSelectorItem }
]

/**
 * 节点选择器
 */
const NodeSelector = () => {
  return (
    <Card className="w-[208px]">
      <CardHeader className="py-2 px-0">
        <CardTitle className="text-sm font-medium px-3">节点</CardTitle>
      </CardHeader>
      <Separator />
      <CardContent className="px-2 py-1">
        {nodeSelectorItems.map((selector, index) => (
          <div key={index}>
            {selector.group && <div className="px-2 py-1 text-sm text-gray-500">{selector.group}</div>}
            {selector.items.map((item) => (
              <div
                key={item.type}
                className={`flex items-center px-2 py-1 cursor-pointer rounded-md hover:bg-gray-100`}
              >
                <div className={cn("flex items-center justify-center w-6 h-6 rounded-sm", item.bgColor)}>
                  {item.icon}
                </div>
                <div className="text-sm ml-2">{item.title}</div>
              </div>
            ))}
          </div>
        ))}
      </CardContent>
    </Card>
  )
}

export default NodeSelector
